import ProFormUpload from '@/components/ProFormUpload';
import { findTreeData, formatToSelectTreeArr } from '@/utils/format';
import {
  ProForm,
  ProFormDigit,
  ProFormSelect,
  ProFormSlider,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { useMemo } from 'react';
export interface Props {
  isEdit: boolean;
  formData: GoodsListManagementApi.FormData;
  goodsClassifyList: GoodsClassifyManagementApi.InfoResponse[];
  setFormData: React.Dispatch<React.SetStateAction<GoodsListManagementApi.FormData>>;
}
function GoodsListManagementGoodsForm(props: Props) {
  const { isEdit, formData, goodsClassifyList, setFormData } = props;

  const goodsClassifyTreeData = useMemo(() => {
    return formatToSelectTreeArr(goodsClassifyList, 'classifyName');
  }, [goodsClassifyList]);

  return (
    <>
      <ProForm.Group>
        <ProFormText
          width="md"
          name="goodsName"
          label="商品名称"
          placeholder="请输入商品名称"
          rules={[{ required: true }]}
          fieldProps={{
            value: formData.goodsName,
            onChange: (e) => setFormData({ ...formData, goodsName: e.target.value }),
          }}
        />
        <ProFormUpload
          name="mainPicture"
          label="产品图"
          placeholder="请上传图片"
          max={1}
          rules={[{ required: true }]}
          file={formData.mainPicture}
          onChangeFile={(file) => {
            setFormData({ ...formData, mainPicture: file });
          }}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTreeSelect
          required
          width="md"
          name="goodsClassifyId"
          label="商品分类"
          placeholder="请选择商品分类"
          rules={[{ required: true }]}
          fieldProps={{
            fieldNames: {
              label: 'title',
            },
            treeData: goodsClassifyTreeData,
            value: formData.goodsClassifyId,
            onChange: (value) => {
              const data = findTreeData(goodsClassifyTreeData, value);
              if (data && data.length) {
                setFormData({
                  ...formData,
                  goodsClassifyId: data[0].value,
                  goodsClassifyNames: data[0].title,
                });
              }
            },
          }}
        />
        <ProFormSelect
          required
          width="md"
          disabled={isEdit}
          name="goodsCategory"
          label="商品类型"
          placeholder="请选择商品类型"
          // rules={[{ required: true }]}
          options={[
            { label: '实物商品', value: 1 },
            { label: '优惠券', value: 0 },
          ]}
          fieldProps={{
            value: formData.goodsCategory,
            onChange: (value) => {
              setFormData({ ...formData, goodsCategory: value });
            },
          }}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDigit
          width="md"
          name="exhibitionPrice"
          min={0}
          label="划线价"
          placeholder="请输入划线价"
          // rules={[{ required: true, type: 'number', min: 0 }]}
          fieldProps={{
            value: formData.exhibitionPrice,
            onChange: (value) => setFormData({ ...formData, exhibitionPrice: value || 0 }),
          }}
        />
        <ProFormDigit
          width="md"
          name="sellPrice"
          min={0}
          label="销售价"
          placeholder="请输入销售价"
          // rules={[{ required: true }]}
          fieldProps={{
            value: formData.sellPrice,
            onChange: (value) => setFormData({ ...formData, sellPrice: value || 0 }),
          }}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDigit
          width="md"
          name="integral"
          min={0}
          label="兑换积分"
          placeholder="请输入兑换积分"
          // rules={[{ required: true }]}
          fieldProps={{
            value: formData.integral,
            onChange: (value) => setFormData({ ...formData, integral: value || 0 }),
          }}
        />
        <ProFormSwitch
          width="md"
          name="isRecommend"
          label="推荐"
          placeholder="请选择推荐"
          fieldProps={{
            checked: formData.isRecommend,
            onChange: (value) => {
              setFormData({ ...formData, isRecommend: value });
            },
          }}
        />
        <ProFormSwitch
          width="md"
          name="isOnlyExchange"
          label="仅兑换"
          placeholder="请选择仅兑换"
          fieldProps={{
            checked: formData.isOnlyExchange,
            onChange: (value) => {
              setFormData({ ...formData, isOnlyExchange: value });
            },
          }}
        />
      </ProForm.Group>
      <ProFormUpload
        name="morePictureJson"
        label="产品图"
        placeholder="请上传图片"
        max={9}
        file={formData.morePictureJson}
        onChangeFile={(file) => {
          setFormData({ ...formData, morePictureJson: file });
        }}
      />
      <ProFormUpload
        name="bodyPictureJson"
        label="详情图"
        placeholder="请上传图片"
        max={9}
        file={formData.bodyPictureJson}
        onChangeFile={(file) => {
          setFormData({ ...formData, bodyPictureJson: file });
        }}
      />
      <ProFormSlider
        width="xl"
        name="order"
        label="排序"
        placeholder="请输入排序"
        fieldProps={{
          value: formData.order,
          onChange: (value: number) => {
            setFormData({ ...formData, order: value });
          },
        }}
      />
      <ProFormTextArea
        name="description"
        label="商品描述"
        placeholder="请输入商品描述"
        fieldProps={{
          value: formData.description,
          onChange: (e) => setFormData({ ...formData, description: e.target.value }),
        }}
      />
    </>
  );
}
export default GoodsListManagementGoodsForm;
